<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import HeaderNav from '../components/HeaderNav.vue'
import Sidebar from '../components/Sidebar.vue'

// 获取路由实例
const route = useRoute()

// 用户数据
const currentUser = ref({
  username: '游戏玩家007',
  level: 12,
  avatar: '/src/assets/5a5b07566aa2ae5454ac770f47544e64.jpeg',
  followers: 0,
  following: 0,
  likes: 1
})

// 获取用户点赞过的帖子
const likedPosts = ref([])
const likedPostsData = ref([])

// 模拟从主页获取的帖子数据（实际应该从全局状态或API获取）
const mockPostsData = [
  {
    id: 1,
    user: {
      name: '夜之城传奇',
      avatar: 'https://randomuser.me/api/portraits/men/45.jpg',
      level: 38
    },
    game: {
      id: 1,
      name: '赛博朋克 2077',
      image: 'https://cdn.cloudflare.steamstatic.com/steam/apps/1091500/capsule_sm_120.jpg'
    },
    content: '《赛博朋克 2077》最新DLC"自由幻局"真的太香了！伊德欧·多洛斯这个角色塑造得太有深度了，新剧情也非常精彩，强烈推荐给所有夜之城的老玩家！',
    images: [
      'https://cdn.cloudflare.steamstatic.com/steam/apps/1091500/header.jpg'
    ],
    time: '2小时前',
    likes: 568,
    comments: 124,
    shares: 36
  },
  {
    id: 2,
    user: {
      name: '褪色者',
      avatar: 'https://randomuser.me/api/portraits/women/28.jpg',
      level: 52
    },
    game: {
      id: 2,
      name: '艾尔登法环',
      image: 'https://cdn.cloudflare.steamstatic.com/steam/apps/1245620/capsule_sm_120.jpg'
    },
    content: '终于打败了女武神玛莲妮亚！这个BOSS的难度真的名不虚传，用了整整三天才通关。分享一下我的加点和装备搭配，希望能帮到还在卡关的朋友们。',
    images: [],
    time: '5小时前',
    likes: 789,
    comments: 256,
    shares: 89
  }
]

// 当前激活的标签页
const currentTab = ref('posts')

// 加载用户点赞状态
const loadLikedPosts = () => {
  const savedLikedPosts = localStorage.getItem('likedPosts')
  if (savedLikedPosts) {
    likedPosts.value = JSON.parse(savedLikedPosts)
    // 过滤出用户点赞过的帖子
    likedPostsData.value = mockPostsData.filter(post => likedPosts.value.includes(post.id))
  }
}

// 用户关注列表数据
const userFollowing = [
  {
    id: 1,
    username: '专业游戏评测',
    avatar: '/src/assets/5a5b07566aa2ae5454ac770f47544e64.jpeg',
    level: 8
  },
  {
    id: 2,
    username: '独立游戏开发者老王',
    avatar: '/src/assets/5a5b07566aa2ae5454ac770f47544e64.jpeg',
    level: 15
  }
]

// 当前用户发布的帖子
const userPosts = [
  {
    id: 1,
    content: '最近在玩赛博朋克2077，感觉优化好多了，值得一玩！',
    images: ['/src/assets/赛博朋克1.jpg', '/src/assets/赛博朋克2.jpg', '/src/assets/赛博朋克3.jpg'],
    game: {
      name: '赛博朋克2077',
      cover: '/src/assets/赛博朋克1.jpg'
    },
    likes: 1,
    comments: 0,
    timestamp: '2024-01-15 10:30'
  }
]

// 切换标签页
const switchTab = (tab) => {
  currentTab.value = tab
}

// 从URL参数设置默认标签
const setDefaultTab = () => {
  const tab = route.query.tab
  if (tab && ['posts', 'topics', 'collections', 'likes', 'following'].includes(tab)) {
    currentTab.value = tab
  }
}

// 跳转游戏详情页
const goToGameDetail = (gameId) => {
  router.push(`/game/${gameId}`)
}

// 生命周期钩子
onMounted(() => {
  // 检查URL查询参数，如果有tab参数则切换到对应的标签页
  const tab = route.query.tab
  if (tab && ['posts', 'likes', 'collection'].includes(tab)) {
    currentTab.value = tab
  }
  
  loadLikedPosts()
  
  // 监听localStorage变化，更新点赞数据
  window.addEventListener('storage', (e) => {
    if (e.key === 'likedPosts') {
      loadLikedPosts()
    }
  })
})
</script>

<template>
  <div class="profile-container">
    <!-- 头部导航 -->
    <HeaderNav />
    
    <!-- 主内容区 -->
    <div class="profile-main">
      <!-- 左侧用户信息 -->
      <div class="profile-sidebar">
        <!-- 用户头像 -->
        <div class="user-avatar-container">
          <img :src="currentUser?.avatar" :alt="currentUser?.username" class="user-avatar" />
        </div>
        
        <!-- 用户基本信息 -->
        <div class="user-basic-info">
          <h1 class="username">{{ currentUser?.username || '用户151314584195' }}</h1>
          <div class="user-stats">
            <div class="stat-item">
              <span class="stat-number">{{ currentUser?.following || 0 }}</span>
              <span class="stat-label">关注</span>
            </div>
            <div class="stat-divider"></div>
            <div class="stat-item">
              <span class="stat-number">{{ currentUser?.followers || 0 }}</span>
              <span class="stat-label">粉丝</span>
            </div>
            <div class="stat-divider"></div>
            <div class="stat-item">
              <span class="stat-number">{{ currentUser?.likes || 0 }}</span>
              <span class="stat-label">获赞</span>
            </div>
          </div>
        </div>
        
        <!-- 操作按钮 -->
        <div class="profile-actions">
          <button class="btn-edit">改资料</button>
          <div class="membership-tooltip-container">
            <router-link to="/membership" class="btn-open-platform">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
              </svg>
              加入会员
            </router-link>
            <div class="membership-tooltip">
              <div class="tooltip-header">会员特权</div>
              <ul class="tooltip-features">
                <li>🔥 热门游戏抢先体验</li>
                <li>💰 会员专属折扣</li>
                <li>🎮 独家游戏礼包</li>
                <li>💎 尊贵身份标识</li>
                <li>👥 专属客服通道</li>
              </ul>
              <div class="tooltip-pricing">首月仅需15元</div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 右侧内容区 -->
      <div class="profile-content">
        <!-- 导航菜单 -->
        <div class="profile-nav">
          <div class="nav-tabs">
            <button 
              :class="['nav-tab', { active: currentTab === 'posts' }]" 
              @click="switchTab('posts')"
            >
              动态
            </button>
            <button 
              :class="['nav-tab', { active: currentTab === 'topics' }]" 
              @click="switchTab('topics')"
            >
              专栏
            </button>
            <button 
              :class="['nav-tab', { active: currentTab === 'collections' }]" 
              @click="switchTab('collections')"
            >
              收藏
            </button>
            <button 
              :class="['nav-tab', { active: currentTab === 'likes' }]" 
              @click="switchTab('likes')"
            >
              赞过
            </button>
            <button 
              :class="['nav-tab', { active: currentTab === 'following' }]" 
              @click="switchTab('following')"
            >
              关注
            </button>
          </div>
        </div>
        
        <!-- 标签页内容 -->
        <div class="tab-content-wrapper">
          <!-- 动态内容 -->
          <div v-if="currentTab === 'posts'" class="tab-content">
            <div class="post-list">
              <div v-for="post in userPosts" :key="post.id" class="post-item">
                <div class="post-content">
                  <p>{{ post.content }}</p>
                  <!-- 帖子图片 -->
                  <div v-if="post.images && post.images.length" class="post-images">
                    <img 
                      v-for="(image, index) in post.images" 
                      :key="index" 
                      :src="image" 
                      :alt="`Post image ${index + 1}`"
                      class="post-image"
                    />
                  </div>
                  <!-- 游戏信息 -->
                  <div v-if="post.game" class="post-game" @click="goToGameDetail(1)">
                    <img :src="post.game.cover" :alt="post.game.name" class="game-icon" />
                    <span>{{ post.game.name }}</span>
                  </div>
                </div>
                <div class="post-actions">
                  <button class="action-btn like-btn">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2">
                      <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
                    </svg>
                    <span>{{ post.likes }}</span>
                  </button>
                  <button class="action-btn comment-btn">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                      <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
                    </svg>
                    <span>{{ post.comments }}</span>
                  </button>
                  <span class="post-time">{{ post.timestamp }}</span>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 专栏内容 -->
          <div v-else-if="currentTab === 'topics'" class="tab-content">
            <div class="empty-state">
              <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#ccc" stroke-width="1">
                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
              </svg>
              <p>暂无专栏内容</p>
            </div>
          </div>
          
          <!-- 收藏内容 -->
          <div v-else-if="currentTab === 'collections'" class="tab-content">
            <div class="empty-state">
              <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#ccc" stroke-width="1">
                <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
              </svg>
              <p>暂无收藏内容</p>
            </div>
          </div>
          
          <!-- 点赞内容 -->
          <div v-else-if="currentTab === 'likes'" class="tab-content">
            <div v-if="likedPostsData.length > 0" class="post-list">
              <div v-for="post in likedPostsData" :key="post.id" class="post-item">
                <div class="post-header">
                  <img :src="post.user.avatar" :alt="post.user.name" class="post-user-avatar" />
                  <div class="post-user-info">
                    <div class="user-name-container">
                      <span class="user-name">{{ post.user.name }}</span>
                      <span class="user-level">Lv.{{ post.user.level }}</span>
                    </div>
                    <div class="post-meta">
                      <div class="game-tag">
                        <img :src="post.game.image" :alt="post.game.name" class="game-icon" />
                        {{ post.game.name }}
                      </div>
                      <span class="post-time">{{ post.time }}</span>
                    </div>
                  </div>
                </div>
                <div class="post-content">
                  <p>{{ post.content }}</p>
                  <div v-if="post.images.length > 0" class="post-images">
                    <img v-for="(img, index) in post.images" :key="index" :src="img" :alt="`帖子图片${index + 1}`" class="post-image" />
                  </div>
                </div>
                <div class="post-actions">
                  <button class="action-btn like-btn liked">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2">
                      <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
                    </svg>
                    <span>{{ post.likes }}</span>
                  </button>
                  <button class="action-btn comment-btn">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                      <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
                    </svg>
                    <span>{{ post.comments }}</span>
                  </button>
                </div>
              </div>
            </div>
            <div v-else class="empty-state">
              <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#ccc" stroke-width="1">
                <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
              </svg>
              <p>暂无赞过内容</p>
            </div>
          </div>
          
          <!-- 关注内容 -->
          <div v-else-if="currentTab === 'following'" class="tab-content">
            <div class="following-list">
              <div v-for="user in userFollowing" :key="user.id" class="following-item">
                <div class="user-info">
                  <img :src="user.avatar" :alt="user.username" class="user-avatar" />
                  <div class="user-details">
                    <p class="user-name">{{ user.username }}</p>
                    <p class="user-level">Lv.{{ user.level }}</p>
                  </div>
                </div>
                <button class="btn-following">已关注</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.action-btn.liked {
  color: #ff4757;
}
/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.profile-container {
  min-height: 100vh;
  background-color: #121212;
  padding-bottom: 80px;
}

/* 主内容区域 */
.profile-main {
  display: flex;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
  color: #fff;
}

/* 左侧用户信息栏 */
.profile-sidebar {
  width: 280px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 32px 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 用户头像 */
.user-avatar-container {
  margin-bottom: 20px;
}

.user-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #f0f0f0;
}

/* 用户基本信息 */
.user-basic-info {
  text-align: center;
  margin-bottom: 24px;
}

.username {
  font-size: 22px;
  font-weight: 500;
  margin: 16px 0 12px;
  color: #fff;
}

.user-stats {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: 20px;
  font-weight: 500;
  color: #fff;
}

.stat-label {
  font-size: 14px;
  color: #cccccc;
  margin-top: 4px;
}

.stat-divider {
  width: 1px;
  height: 24px;
  background-color: #e0e0e0;
}

/* 操作按钮 */
.profile-actions {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.btn-edit {
  width: 100%;
  padding: 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-edit:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* 会员按钮 */
.btn-open-platform {
  width: 100%;
  padding: 12px;
  background-color: #ff4757;
  border: none;
  border-radius: 8px;
  color: white;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 2px 6px rgba(255, 71, 87, 0.4);
}

.btn-open-platform:hover {
  background-color: #ffc107;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.6);
}

/* 会员悬浮窗样式 */
.membership-tooltip-container {
  position: relative;
  width: 100%;
}

.membership-tooltip {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 8px;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s;
  pointer-events: none;
  color: #fff;
}

.membership-tooltip-container:hover .membership-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.tooltip-header {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #fff;
}

.tooltip-features {
  list-style: none;
  margin-bottom: 16px;
}

.tooltip-features li {
  padding: 6px 0;
  color: #cccccc;
  font-size: 14px;
}

.tooltip-pricing {
  font-size: 16px;
  font-weight: 600;
  color: #ff4757;
  text-align: center;
}

/* 右侧内容区 */
.profile-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 导航菜单 */
.profile-nav {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 0 20px;
}

.nav-tabs {
  display: flex;
  overflow-x: auto;
  padding: 0;
  gap: 0;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
}

.nav-tab {
  padding: 20px 24px;
  border: none;
  background: none;
  font-size: 16px;
  color: #cccccc;
  cursor: pointer;
  transition: all 0.3s;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.nav-tab:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.nav-tab.active {
  color: #fff;
  font-weight: 500;
  border-bottom-color: #ff4757;
}

/* 标签页内容 */
.tab-content-wrapper {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 24px;
  flex: 1;
}

.tab-content {
  min-height: 400px;
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 400px;
  color: #666;
}

.empty-state p {
  margin-top: 16px;
  font-size: 16px;
}

/* 帖子列表 */
.post-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.post-item {
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  transition: all 0.3s;
}

.post-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.05);
}

.post-content p {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 16px;
  color: #fff;
}

/* 帖子图片 */
.post-images {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.post-image {
  width: 100%;
  max-width: calc(33.333% - 5.333px);
  height: 160px;
  object-fit: cover;
  border-radius: 8px;
}

/* 游戏信息 */
.post-game {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.3s;
  margin-bottom: 16px;
}

.post-game:hover {
  background: rgba(255, 255, 255, 0.2);
}

.post-game .game-icon {
  width: 24px;
  height: 24px;
  object-fit: cover;
  border-radius: 4px;
}

.post-game span {
  font-size: 14px;
  color: #cccccc;
}

/* 帖子操作 */
.post-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: #666;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
  padding: 6px 0;
}

.action-btn:hover {
  color: #ff4757;
}

.post-time {
  margin-left: auto;
  font-size: 14px;
  color: #666;
}

/* 关注列表 */
.following-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.following-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  transition: background-color 0.2s;
}

.following-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-details {
  display: flex;
  flex-direction: column;
}

.user-name {
  font-size: 16px;
  font-weight: 500;
  margin: 0;
  color: #fff;
}

.user-level {
  font-size: 14px;
  color: #cccccc;
  margin: 2px 0 0 0;
}

.btn-following {
  padding: 6px 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  color: #cccccc;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-following:hover {
  border-color: rgba(64, 158, 255, 0.5);
  color: #409eff;
  background: rgba(64, 158, 255, 0.1);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .profile-main {
    flex-direction: column;
    padding: 12px;
  }
  
  .profile-sidebar {
    width: 100%;
    flex-direction: row;
    align-items: flex-start;
    padding: 16px;
  }
  
  .user-avatar-container {
    margin-bottom: 0;
    margin-right: 16px;
  }
  
  .user-avatar {
    width: 80px;
    height: 80px;
  }
  
  .user-basic-info {
    text-align: left;
    margin-bottom: 0;
    flex: 1;
  }
  
  .username {
    font-size: 18px;
    margin-bottom: 12px;
  }
  
  .profile-actions {
    width: auto;
  }
  
  .btn-edit, .btn-open-platform {
    padding: 8px 16px;
    font-size: 12px;
  }
  
  .nav-tab {
    padding: 16px 16px;
    font-size: 14px;
  }
  
  .tab-content-wrapper {
    padding: 16px;
  }
  
  .post-game {
    padding: 4px 8px;
  }
  
  .post-game img {
    width: 20px;
    height: 20px;
  }
}
</style>